<script setup lang="ts">
import { BookCopy } from "lucide-vue-next";
import Separator from "./ui/separator/Separator.vue";
</script>

<template>
  <footer
    id="footer"
    class="container py-24 sm:py-32"
  >
    <div class="p-10 bg-muted/50 dark:bg-card border rounded-2xl">
      <div
        class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-x-12 gap-y-8"
      >
        <div class="col-span-full xl:col-span-2">
          <a
            href="#"
            class="flex font-bold items-center"
          >
            <BookCopy
              class="bg-gradient-to-tr from-primary via-primary/70 to-primary rounded-lg w-9 h-9 mr-2 border text-white"
            />

            <h3 class="text-2xl">刀刀复制工具</h3>
          </a>
        </div>



        <div class="flex flex-col gap-2">
          <h3 class="font-bold text-lg">接开发</h3>
          <div>
            <a
              href="#"
              class="opacity-60 hover:opacity-100"
            >
              爬虫
            </a>
          </div>

          <div>
            <a
              href="#"
              class="opacity-60 hover:opacity-100"
            >
              自动化脚本
            </a>
          </div>

          <div>
            <a
              href="#"
              class="opacity-60 hover:opacity-100"
            >
              全栈程序
            </a>
          </div>
        </div>

<!--        <div class="flex flex-col gap-2">-->
<!--          <h3 class="font-bold text-lg">Platforms</h3>-->
<!--          <div>-->
<!--            <a-->
<!--              href="#"-->
<!--              class="opacity-60 hover:opacity-100"-->
<!--            >-->
<!--              iOS-->
<!--            </a>-->
<!--          </div>-->

<!--          <div>-->
<!--            <a-->
<!--              href="#"-->
<!--              class="opacity-60 hover:opacity-100"-->
<!--            >-->
<!--              Android-->
<!--            </a>-->
<!--          </div>-->

<!--          <div>-->
<!--            <a-->
<!--              href="#"-->
<!--              class="opacity-60 hover:opacity-100"-->
<!--            >-->
<!--              Web-->
<!--            </a>-->
<!--          </div>-->
<!--        </div>-->

<!--        <div class="flex flex-col gap-2">-->
<!--          <h3 class="font-bold text-lg">Help</h3>-->
<!--          <div>-->
<!--            <a-->
<!--              href="#"-->
<!--              class="opacity-60 hover:opacity-100"-->
<!--            >-->
<!--              Contact Us-->
<!--            </a>-->
<!--          </div>-->

<!--          <div>-->
<!--            <a-->
<!--              href="#"-->
<!--              class="opacity-60 hover:opacity-100"-->
<!--            >-->
<!--              FAQ-->
<!--            </a>-->
<!--          </div>-->

<!--          <div>-->
<!--            <a-->
<!--              href="#"-->
<!--              class="opacity-60 hover:opacity-100"-->
<!--            >-->
<!--              Feedback-->
<!--            </a>-->
<!--          </div>-->
<!--        </div>-->

<!--        <div class="flex flex-col gap-2">-->
<!--          <h3 class="font-bold text-lg">Socials</h3>-->
<!--          <div>-->
<!--            <a-->
<!--              href="#"-->
<!--              class="opacity-60 hover:opacity-100"-->
<!--            >-->
<!--              Twitch-->
<!--            </a>-->
<!--          </div>-->

<!--          <div>-->
<!--            <a-->
<!--              href="#"-->
<!--              class="opacity-60 hover:opacity-100"-->
<!--            >-->
<!--              Discord-->
<!--            </a>-->
<!--          </div>-->

<!--          <div>-->
<!--            <a-->
<!--              href="#"-->
<!--              class="opacity-60 hover:opacity-100"-->
<!--            >-->
<!--              Dribbble-->
<!--            </a>-->
<!--          </div>-->
<!--        </div>-->
      </div>

      <Separator class="my-6" />
<!--      <section className="">-->
<!--        <h3 class="">-->
<!--          &copy; 2024 Designed and developed by-->
<!--          <a-->
<!--            target="_blank"-->
<!--            href="https://github.com/leoMirandaa"-->
<!--            className="text-primary transition-all border-primary hover:border-b-2"-->
<!--          >-->
<!--            Leo Miranda-->
<!--          </a>-->
<!--        </h3>-->
<!--      </section>-->
    </div>
  </footer>
</template>
